<script setup lang="tsx">
import { reactive, ref, onMounted } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { ContentWrap } from '@/components/ContentWrap'
import { useAppStore } from '@/store/modules/app'
import { ElDivider, ElMessage, FormInstance } from 'element-plus'
import { SelectOption } from '@/api/common/types'
import { hasPermission } from '@/utils/permission'
import { getDictionarySelectOptionList } from '@/utils/dictionary'
import { SystemSetting } from '@/api/system/setting/types'
import { getSystemSettingApi, updateSystemSettingApi } from '@/api/system/setting'

const appStore = useAppStore()
const { t } = useI18n()
const loading = ref(false)
const loginWayOptions = ref<SelectOption[]>([])
const getLoginWayList = async () => {
  loginWayOptions.value = getDictionarySelectOptionList('loginWay')
  console.log('loginWayOptions====', loginWayOptions)
}

const systemSetting = reactive<SystemSetting>({
  settingId: undefined,
  openGreyMode: false,
  showLogo: true,
  showFooter: true,
  showScreenFull: true,
  showHamburger: true,
  openVerificationCode: true,
  loginWayList: [],
  loginWay: ''
})
const getSystemConfig = async () => {
  const res = await getSystemSettingApi()
  if (res?.data) {
    systemSetting.settingId = res.data.settingId
    systemSetting.openGreyMode = res.data.openGreyMode
    systemSetting.showLogo = res.data.showLogo
    systemSetting.showFooter = res.data.showFooter
    systemSetting.showScreenFull = res.data.showScreenFull
    systemSetting.showHamburger = res.data.showHamburger
    systemSetting.openVerificationCode = res.data.openVerificationCode
    const loginWay = res.data.loginWay
    systemSetting.loginWay = loginWay
    if (loginWay) {
      systemSetting.loginWayList = loginWay.split(',')
    }
  }
}

const rules = {
  loginWayList: [{ required: true, message: '登录方式不能为空', trigger: 'change' }]
}
const settingFormRef = ref<FormInstance>()
const saveSetting = async (formRef: FormInstance) => {
  await formRef.validate(async (isValid) => {
    console.log('isValid====', isValid)
    if (isValid) {
      systemSetting.loginWay = systemSetting.loginWayList.join(',')
      console.log(systemSetting)
      loading.value = true
      await updateSystemSettingApi(systemSetting)
      loading.value = false
      ElMessage.success('保存成功')
    }
  })
}

onMounted(() => {
  getLoginWayList()
  getSystemConfig()
})
</script>

<template>
  <ContentWrap :title="t('systemSetting.title')">
    <el-form ref="settingFormRef" :model="systemSetting" :rules="rules">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="灰色模式">
            <el-switch
              v-model="systemSetting.openGreyMode"
              class="mt-2"
              style="margin-left: 24px"
              inline-prompt
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示LOGO">
            <el-switch
              v-model="systemSetting.showLogo"
              class="mt-2"
              style="margin-left: 24px"
              inline-prompt
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="显示页脚">
            <el-switch
              v-model="systemSetting.showFooter"
              class="mt-2"
              style="margin-left: 24px"
              inline-prompt
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="全屏图标">
            <el-switch
              v-model="systemSetting.showScreenFull"
              class="mt-2"
              style="margin-left: 24px"
              inline-prompt
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="折叠菜单图标">
            <el-switch
              v-model="systemSetting.showHamburger"
              class="mt-2"
              style="margin-left: 24px"
              inline-prompt
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="开启验证码">
            <el-switch
              v-model="systemSetting.openVerificationCode"
              class="mt-2"
              style="margin-left: 24px"
              inline-prompt
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-form-item prop="loginWayList" label="登录方式">
            <el-select
              v-model="systemSetting.loginWayList"
              multiple
              collapse-tags
              collapse-tags-tooltip
              :max-collapse-tags="3"
              placeholder="请选择登录方式"
              style="width: 240px"
            >
              <el-option
                v-for="item in loginWayOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-divider />
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col>
          <el-button
            type="primary"
            :loading="loading"
            @click="saveSetting(settingFormRef)"
            v-if="hasPermission('system:setting:update')"
            >更新配置</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </ContentWrap>
</template>
